﻿<phone:PhoneApplicationPage 
    x:Class="mal.WP7.FreeRemote.MainPage"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:phone="clr-namespace:Microsoft.Phone.Controls;assembly=Microsoft.Phone"
    xmlns:shell="clr-namespace:Microsoft.Phone.Shell;assembly=Microsoft.Phone"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    mc:Ignorable="d" d:DesignWidth="480" d:DesignHeight="768"
    FontFamily="{StaticResource PhoneFontFamilyNormal}"
    FontSize="{StaticResource PhoneFontSizeNormal}"
    Foreground="{StaticResource PhoneForegroundBrush}"
    SupportedOrientations="Portrait" Orientation="Portrait"
    shell:SystemTray.IsVisible="True"
    xmlns:toolkit="clr-namespace:Microsoft.Phone.Controls;assembly=Microsoft.Phone.Controls.Toolkit"
    xmlns:viewModels="clr-namespace:mal.WP7.FreeRemote.ViewModels"
    xmlns:converters="clr-namespace:mal.WP7.FreeRemote.Converters"
    xmlns:local="clr-namespace:mal.WP7.FreeRemote">
    <phone:PhoneApplicationPage.Resources>

        <converters:BoxNumberConverter x:Key="BoxNumberConverter" />
        
        <Style TargetType="StackPanel" x:Key="TitlePanelStyle">
            <Setter Property="Margin" Value="12,5,0,0" />
        </Style>

        <Style TargetType="Button" x:Name="buttonStyle" >
            <Setter Property="BorderThickness" Value="0" />
            <Setter Property="Opacity" Value="0.5" />
            <Setter Property="VerticalAlignment" Value="Top" />
            <Setter Property="HorizontalAlignment" Value="Left" />
        </Style>

        <Style x:Key="NavigationButton" TargetType="Button">
            <Setter Property="Background" Value="Transparent"/>
            <Setter Property="BorderBrush" Value="{StaticResource PhoneForegroundBrush}"/>
            <Setter Property="Foreground" Value="{StaticResource PhoneForegroundBrush}"/>
            <Setter Property="BorderThickness" Value="{StaticResource PhoneBorderThickness}"/>
            <Setter Property="FontFamily" Value="{StaticResource PhoneFontFamilySemiBold}"/>
            <Setter Property="FontSize" Value="{StaticResource PhoneFontSizeMediumLarge}"/>
            <Setter Property="Padding" Value="0"/>
            <Setter Property="Template">
                <Setter.Value>
                    <ControlTemplate TargetType="Button">
                        <Grid Background="Transparent">
                            <VisualStateManager.VisualStateGroups>
                                <VisualStateGroup x:Name="CommonStates">
                                    <VisualState x:Name="Normal"/>
                                    <VisualState x:Name="MouseOver"/>
                                    <VisualState x:Name="Pressed">
                                        <Storyboard>
                                            <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Foreground" Storyboard.TargetName="ContentContainer">
                                                <DiscreteObjectKeyFrame KeyTime="0" Value="{StaticResource PhoneBackgroundBrush}"/>
                                            </ObjectAnimationUsingKeyFrames>
                                            <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Background" Storyboard.TargetName="ButtonBackground">
                                                <DiscreteObjectKeyFrame KeyTime="0" Value="{StaticResource PhoneForegroundBrush}"/>
                                            </ObjectAnimationUsingKeyFrames>
                                            <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="BorderBrush" Storyboard.TargetName="ButtonBackground">
                                                <DiscreteObjectKeyFrame KeyTime="0" Value="{StaticResource PhoneForegroundBrush}"/>
                                            </ObjectAnimationUsingKeyFrames>
                                        </Storyboard>
                                    </VisualState>
                                    <VisualState x:Name="Disabled">
                                        <Storyboard>
                                            <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Foreground" Storyboard.TargetName="ContentContainer">
                                                <DiscreteObjectKeyFrame KeyTime="0" Value="{StaticResource PhoneDisabledBrush}"/>
                                            </ObjectAnimationUsingKeyFrames>
                                            <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="BorderBrush" Storyboard.TargetName="ButtonBackground">
                                                <DiscreteObjectKeyFrame KeyTime="0" Value="{StaticResource PhoneDisabledBrush}"/>
                                            </ObjectAnimationUsingKeyFrames>
                                            <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Background" Storyboard.TargetName="ButtonBackground">
                                                <DiscreteObjectKeyFrame KeyTime="0" Value="Transparent"/>
                                            </ObjectAnimationUsingKeyFrames>
                                        </Storyboard>
                                    </VisualState>
                                </VisualStateGroup>
                            </VisualStateManager.VisualStateGroups>
                            <Border x:Name="ButtonBackground" BorderBrush="{TemplateBinding BorderBrush}" Background="{TemplateBinding Background}" CornerRadius="0">
                                <ContentControl x:Name="ContentContainer" ContentTemplate="{TemplateBinding ContentTemplate}" Content="{TemplateBinding Content}" Foreground="{TemplateBinding Foreground}" HorizontalContentAlignment="{TemplateBinding HorizontalContentAlignment}" Padding="{TemplateBinding Padding}" VerticalContentAlignment="{TemplateBinding VerticalContentAlignment}"/>
                            </Border>
                        </Grid>
                    </ControlTemplate>
                </Setter.Value>
            </Setter>
        </Style>

        <Storyboard x:Name="configPanel" Completed="OnConfigPanelCompleted" >
            <DoubleAnimation Storyboard.TargetName="ContentPanel"
                             Storyboard.TargetProperty="(UIElement.RenderTransform).(TransformGroup.Children)[0].(TranslateTransform.X)"
                    To="-420" Duration="0:0:0.2" />

            <DoubleAnimation Storyboard.TargetName="navigationName"
                                 Storyboard.TargetProperty="(UIElement.RenderTransform).(TransformGroup.Children)[0].(RotateTransform.Angle)"
                    To="0" Duration="0:0:0.2" />

            <DoubleAnimation Storyboard.TargetName="navigationNameWhite"
                                 Storyboard.TargetProperty="(UIElement.RenderTransform).(TransformGroup.Children)[0].(RotateTransform.Angle)"
                    To="0" Duration="0:0:0.2" />
            
        </Storyboard>

        <Storyboard x:Name="remotePanel" Completed="OnRemotePanelCompleted" >
            <DoubleAnimation Storyboard.TargetName="ContentPanel"
                             Storyboard.TargetProperty="(UIElement.RenderTransform).(TransformGroup.Children)[0].(TranslateTransform.X)"
                    To="0" Duration="0:0:0.2" />

            <DoubleAnimation Storyboard.TargetName="navigationName"
                                 Storyboard.TargetProperty="(UIElement.RenderTransform).(TransformGroup.Children)[0].(RotateTransform.Angle)"
                    To="180" Duration="0:0:0.2" />

            <DoubleAnimation Storyboard.TargetName="navigationNameWhite"
                                 Storyboard.TargetProperty="(UIElement.RenderTransform).(TransformGroup.Children)[0].(RotateTransform.Angle)"
                    To="180" Duration="0:0:0.2" />
            
        </Storyboard>
    </phone:PhoneApplicationPage.Resources>
    <phone:PhoneApplicationPage.DataContext>
        <viewModels:MainViewModel />
    </phone:PhoneApplicationPage.DataContext>

    <!--LayoutRoot is the root grid where all page content is placed-->
    <Grid x:Name="LayoutRoot" Background="Transparent" Margin="0">
        <toolkit:GestureService.GestureListener>
            <toolkit:GestureListener 
                    Flick="OnGestureListenerFlick"
                    DragStarted="OnGestureListenerDragStarted"
                    DragDelta="OnGestureListenerDragDelta" 
                    DragCompleted="OnGestureListenerDragCompleted"/>
        </toolkit:GestureService.GestureListener>

        <!--ContentPanel - place additional content here-->
        <Canvas x:Name="ContentPanel" Margin="0,0,0,0" Width="960"   >
            <Canvas.RenderTransform>
                <TransformGroup>
                    <TranslateTransform X="0" x:Name="panelTranslate" />
                </TransformGroup>
            </Canvas.RenderTransform>

            <ScrollViewer HorizontalAlignment="Left" Width="480" Height="1000" Canvas.Top="0" Margin="0">
                <Grid Width="480" x:Name="contentButton">
                    <Image Source="Images/telecommande-freebox-revolution-2.jpg"  
                           Width="400" 
                           HorizontalAlignment="Left"
                           />
                </Grid>
            </ScrollViewer>

            <Grid x:Name="configuration" Width="430"
                  Canvas.Left="480">
                <Grid.RowDefinitions>
                    <RowDefinition Height="Auto"/>
                    <RowDefinition Height="*"/>
                </Grid.RowDefinitions>

                <local:HeaderBackground Grid.RowSpan="2" VerticalAlignment="Top" />

                <StackPanel x:Name="TitlePanel" Grid.Row="0" 
                    Style="{StaticResource TitlePanelStyle}">
                    <TextBlock x:Name="ApplicationTitle" Text="FreeMote Revolution" 
                       Style="{StaticResource PhoneTextNormalStyle}"/>

                    <TextBlock Text="Configuration" 
                       Margin="9,-7,0,0" Style="{StaticResource PhoneTextTitle1Style}"/>
                </StackPanel>

                <StackPanel  Grid.Row="1" Margin="12,0,12,0" VerticalAlignment="Top">
                    <TextBlock Text="Sélectionnez le boitier freebox que vous souhaitez contrôler"
                               TextWrapping="Wrap"
                               Style="{StaticResource PhoneTextTitle2Style}"/>

                    <StackPanel Orientation="Horizontal">
                        <RadioButton GroupName="boitier" 
                                     Content="Freebox HD 1" Tag="1" 
                                     IsChecked="{Binding BoxNumber
                            , Converter={StaticResource BoxNumberConverter}, ConverterParameter=1, Mode=TwoWay}" />
                        <RadioButton GroupName="boitier" 
                                     Content="Freebox HD 2" Tag="2"
                                     IsChecked="{Binding BoxNumber, Converter={StaticResource BoxNumberConverter}, ConverterParameter=2, Mode=TwoWay}" />
                    </StackPanel>

                    <TextBlock Text="Code télécommande réseau"
                               TextWrapping="Wrap"
                               Style="{StaticResource PhoneTextTitle2Style}"/>

                    <TextBox Text="{Binding NetworkRemoteCode, Mode=TwoWay}" InputScope="Number"/>
                       
                </StackPanel>


            </Grid>

            <!--<Image Source="Images/telecommande-freebox-revolution-2.jpg" />-->
            <Button VerticalAlignment="Top"  x:Name="navigationName"
                           HorizontalAlignment="Left" 
                    Click="OnNavigationNameClick"
                           Margin="421,10,0,0" Width="48" Height="48" 
                        Style="{StaticResource NavigationButton}">
                <Image Source="Images/back.png" Width="48" Height="48" Margin="0" >

                </Image>
                <Button.RenderTransform>
                    <TransformGroup>
                        <RotateTransform x:Name="buttonRotate"
                        Angle="180" CenterX="24" CenterY="24" />
                    </TransformGroup>
                </Button.RenderTransform>
            </Button>

            <Button VerticalAlignment="Top"  x:Name="navigationNameWhite"
                           HorizontalAlignment="Left" 
                    Click="OnNavigationNameClick"
                           Margin="421,10,0,0" Width="48" Height="48" 
                        Style="{StaticResource NavigationButton}">
                <Image Source="Images/back-white.png" Width="48" Height="48" Margin="0" >

                </Image>
                <Button.RenderTransform>
                    <TransformGroup>
                        <RotateTransform x:Name="buttonRotateWhite"
                        Angle="180" CenterX="24" CenterY="24" />
                    </TransformGroup>
                </Button.RenderTransform>
            </Button>
        </Canvas>
    </Grid>

    <!--Sample code showing usage of ApplicationBar-->
    <!--<phone:PhoneApplicationPage.ApplicationBar>
        <shell:ApplicationBar IsVisible="True" IsMenuEnabled="True">
            <shell:ApplicationBarIconButton IconUri="/Images/appbar_button1.png" Text="Button 1"/>
            <shell:ApplicationBarIconButton IconUri="/Images/appbar_button2.png" Text="Button 2"/>
            <shell:ApplicationBar.MenuItems>
                <shell:ApplicationBarMenuItem Text="MenuItem 1"/>
                <shell:ApplicationBarMenuItem Text="MenuItem 2"/>
            </shell:ApplicationBar.MenuItems>
        </shell:ApplicationBar>
    </phone:PhoneApplicationPage.ApplicationBar>-->

</phone:PhoneApplicationPage>